﻿<!DOCTYPE html>
<html class="no-js" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">

    <title>所有商品</title>
  <link rel="shortcut icon" type="image/x-icon" th:href="@{/img/timg.jpg}" media="screen"/>
    <!--== Google Fonts ==-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700" rel="stylesheet">
  <link rel="stylesheet" th:href="@{/css/alert.css}">
    <!--=== Bootstrap CSS ===-->
    <link th:href="@{/assets2/css/vendor/bootstrap.min.css}" rel="stylesheet">
    <!--=== Font-Awesome CSS ===-->
    <link th:href="@{/assets2/css/vendor/font-awesome.css}" rel="stylesheet">
    <!--=== Plugins CSS ===-->
    <link th:href="@{/assets2/css/plugins.css}" rel="stylesheet">
    <!--=== Helper CSS ===-->
    <link th:href="@{/assets2/css/helper.min.css}" rel="stylesheet">
    <!--=== Main Style CSS ===-->
    <link th:href="@{/assets2/css/style.css}" rel="stylesheet">

    <link rel="stylesheet" th:href="@{/css/default.css}">

    <!-- Modernizer JS -->
    <script th:src="@{/assets2/js/vendor/modernizr-2.8.3.min.js}"></script>


    <!--[if lt IE 9]>
    <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div th:insert="~{shopIndex::header}"></div>

<div class="page-breadcrumb-wrap">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="page-breadcrumb">
          <ul class="nav">
            <li><a href="#">主页</a></li>
            <li><a href="#" class="active">所有商品</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="page-content-wrapper">
  <div class="container">
    <div class="row">
      <!-- Sidebar Area Start -->
      <div class="col-lg-3">
        <div id="sidebar-area-wrap">
          <!-- Single Sidebar Item Start -->
          <div class="single-sidebar-wrap">
            <h2 class="sidebar-title">商店的</h2>
            <div class="sidebar-body">
              <div class="shopping-option d-block d-sm-flex d-lg-block">
                <div class="shopping-option-item">
                  <h4>品牌：</h4>
                  <ul class="sidebar-list">
                    <li><input type="radio" name="brand" th:checked="${brand == null}"><a th:href="@{/shopAll}">全部</a></li>
                    <li><input type="radio" name="brand" th:checked="${brand == '华为'}"><a th:href="@{/shopAll/华为}">华为</a></li>
                    <li><input type="radio" name="brand" th:checked="${brand == '小米'}"><a th:href="@{/shopAll/小米}">小米</a></li>
                    <li><input type="radio" name="brand" th:checked="${brand == '一加'}"><a th:href="@{/shopAll/一加}">一加</a></li>
                    <li><input type="radio" name="brand" th:checked="${brand == 'vivo'}"><a th:href="@{/shopAll/vivo}">vivo</a></li>
                    <li><input type="radio" name="brand" th:checked="${brand == 'oppo'}"><a th:href="@{/shopAll/oppo}">oppo</a></li>
                  </ul>
                </div>

                <div class="shopping-option-item">
                  <h4>价格：</h4>
                  <ul class="sidebar-list">
                    <li><input type="radio" name="price" th:checked="${price == null}"><a th:href="@{/shopAll/{brand}(brand = ${brand == null ? 'all':brand})}">全部</a></li>
                    <li><input type="radio" name="price" th:checked="${price == 999.99}"><a th:href="@{/shopAll/{brand}/{price}(brand = ${brand == null ? 'all':brand},price=999.99)}">$0.00 - $999.99</a></li>
                    <li><input type="radio" name="price" th:checked="${price == 1999.99}"><a th:href="@{/shopAll/{brand}/{price}(brand = ${brand == null ? 'all':brand},price=1999.99)}">$0.00 - $1999.99</a></li>
                    <li><input type="radio" name="price" th:checked="${price == 2999.99}"><a th:href="@{/shopAll/{brand}/{price}(brand = ${brand == null ? 'all':brand},price=2999.99)}">$0.00 - $2999.99</a></li>
                    <li><input type="radio" name="price" th:checked="${price == 3999.99}"><a th:href="@{/shopAll/{brand}/{price}(brand = ${brand == null ? 'all':brand},price=3999.99)}">$0.00 - $3999.99</a></li>
                    <li><input type="radio" name="price" th:checked="${price == 4999.99}"><a th:href="@{/shopAll/{brand}/{price}(brand = ${brand == null ? 'all':brand},price=4999.99)}">$0.00 - $4999.99</a></li>
                    <li><input type="radio" name="price" th:checked="${price == 5000.00}"><a th:href="@{/shopAll/{brand}/{price}(brand = ${brand == null ? 'all':brand},price=5000.00)}">$5000.00以上</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- Single Sidebar Item End -->
        </div>
      </div>
      <!-- Sidebar Area End -->

      <!-- Start Shop Page Content -->
      <div class="col-lg-9 order-first order-lg-last">
        <div class="shop-page-content-wrap">
          <div class="products-settings-option d-block d-md-flex">
            <div class="product-cong-left d-flex align-items-center">
              <ul class="product-view d-flex align-items-center">
                <li class="list current"><i class="fa fa-list-ul"></i></li>
                <li class="box-gird"><i class="fa fa-th"></i></li>
              </ul>
            </div>
          </div>

          <div class="shop-page-products-wrap">
            <div class="products-wrapper products-list-view">
              <div class="row">
                <!-- Single Product Start -->
                <div class="col-lg-4 col-sm-6" th:each="phone:${phones}">
                  <div class="single-product-item">
                    <figure class="product-thumb">
                      <a th:href="@{/singleShop/{id}(id=${phone.getpId()})}"><img th:src="${phone.getPhonePictures().get(0).getPicAddress()}" style="height: 253px"></a>
                      <a th:href="@{/singleShop/{id}(id=${phone.getpId()})}" class="btn btn-round btn-cart" title="点击查看"><i class="fa fa-eye"></i></a>
                    </figure>
                    <div class="product-details">
                      <h2 class="product-title"><a th:href="@{/singleShop/{id}(id=${phone.getpId()})}" th:text="${phone.getpName()}"></a></h2>
                      <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                      </div>
                      <span class="product-price">[[${phone.getpPrice()}]]元</span>

                      <p class="pro-desc" th:text="${phone.getpDescription()}"></p>

                      <div class="product-meta">
                        <a href="javascript:void(0);" class="btn btn-round btn-cart" title="加入购物车" th:onclick="'javascript:indent('+${phone.getpId()}+')'"><i class="fa fa-shopping-cart"></i></a>
                        <a href="javascript:void(0);" class="btn btn-round btn-cart" title="加入收藏夹" th:onclick="'javascript:collect('+${phone.getpId()}+')'"><i class="fa fa-heart"></i></a>
                        <a href="javascript:void(0);" class="btn btn-round btn-cart" title="点击分享" th:onclick="'javascript:share('+${phone.getpId()}+')'" data-toggle="modal" data-target="#myModal"><i class="fa fa-exchange"></i></a>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Single Product End -->
              </div>
            </div>
          </div>

          <div class="products-settings-option d-block d-md-flex">
            <nav class="page-pagination">
              <ul class="pagination" id="page">
              </ul>
            </nav>
          </div>
        </div>
      </div>
      <!-- End Shop Page Content -->
    </div>
  </div>
</div>

<div th:insert="~{shopIndex::footer}"></div>

<!-- 分享 -->
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top: 200px;">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">分享商品</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body" id="qrcode">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="clear">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- Scroll to Top Start -->
<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
<!-- Scroll to Top End -->

<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script th:src="@{/assets2/js/vendor/jquery-3.3.1.min.js}"></script>
<!--=== Jquery Migrate Min Js ===-->
<script th:src="@{/assets2/js/vendor/jquery-migrate-1.4.1.min.js}"></script>
<!--=== Popper Min Js ===-->
<script th:src="@{/assets2/js/vendor/popper.min.js}"></script>
<!--=== Bootstrap Min Js ===-->
<script th:src="@{/assets2/js/vendor/bootstrap.min.js}"></script>
<!--=== Ajax Mail Js ===-->
<script th:src="@{/assets2/js/ajax-mail.js}"></script>
<!--=== Plugins Min Js ===-->
<script th:src="@{/assets2/js/plugins.js}"></script>

<!--=== Active Js ===-->
<script th:src="@{/assets2/js/active.js}"></script>
<script th:src="@{/js/bootstrap-paginator.js}"></script>
<script th:src="@{/js/alert.js}"></script>
<script th:src="@{/js/qrcode.js}"></script>
<script th:src="@{/js/shopIndex.js}"></script>
<script type="text/javascript" th:inline="javascript">
  var currentPage = [[${currentPage}]];	//当前页
  var totalPages = [[${totalPages}]];
  $("#page").bootstrapPaginator({
    bootstrapMajorVersion:3, 	//对应的bootstrap版本
    currentPage: currentPage, 		//当前页数
    numberOfPages: 6, 		//每次显示页数
    totalPages:totalPages, 	//总页数
    shouldShowPage:true,	//是否显示该按钮
    useBootstrapTooltip:true,
    //点击事件
//    onPageClicked: function (event, originalEvent, type, page) {
//      window.location.href = "/calendar?page="+page;
//    }
    pageUrl: function(type, page, current){
      if (page==current) {
        return "javascript:void(0)";
      } else {
        return "/shopAll?page="+page;
      }
    }
  });
</script>
</body>
</html>
